<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="/static/bootstrap-treeview/js/bootstrap-treeview.js"></script>
</head>
<body>
	<div class="row">
		<div id="tree" class="col-5"></div>
		<div class="col-5">
			<div>
				<form>
					<div class="form-group row">
						<label for="staticEmail" class="col-sm-4 col-form-label">上级id</label>
						<div class="col-sm-6">
							<input type="text" readonly class="form-control-plaintext"
								id="parentId" value="email@examplecom">
						</div>
					</div>
					<div class="form-group row">
						<label for="staticEmail" class="col-sm-4 col-form-label">上级名称</label>
						<div class="col-sm-6">
							<input type="text" readonly class="form-control-plaintext"
								id="parentName" value="email@examplecom">
						</div>
					</div>
					<div class="form-group row">
						<label for="inputPassword" class="col-sm-4 col-form-label">新节点名称</label>
						<div class="col-sm-6">
							<input class="form-control" id="currentName">
						</div>
					</div>
					<div class="form-group row">
						<button type="button" class="btn btn-danger" onclick="add()">添加</button>
					</div>
				</form>
			</div>

		</div>
	</div>
	<script type="text/javascript">
		$(function() {
			$.post('./category/tree?pid=0', function(data) {
				// {} 代表对象
				// [] 数组
				$('#tree').treeview({
					data : data,
					onNodeSelected : function(event, data) {
						$("#parentId").val(data.id)
						$("#parentName").val(data.text)
					}
				});
			}, "json")

		})
	</script>
</body>
</html>